
<!DOCTYPE html>
<html lang="en">

    <head>
        

        <meta charset="utf-8">
                <title>Unikit - Admin & Dashboard Template</title>
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
                <meta content="" name="author">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">

       

         <!-- App css -->
         <link href="static/css/bootstrap-dark.min.css" rel="stylesheet" type="text/css">
         <link href="static/css/icons.min.css" rel="stylesheet" type="text/css">
         <link href="static/css/app-dark.min.css" rel="stylesheet" type="text/css">

    </head>

    <body data-layout="horizontal" class="">
        <!-- leftbar-tab-menu -->
        
        <!-- Top Bar Start -->
        <div class="topbar">  
            <!-- LOGO -->
            <div class="brand">
                <a href="index2.html" class="logo">
                    <span>
                        <img src="static/picture/logo-sm.png" alt="logo-small" class="logo-sm">
                    </span>
                    <span>
                        <img src="static/picture/logo.png" alt="logo-large" class="logo-lg logo-light">
                        <img src="static/picture/logo-dark.png" alt="logo-large" class="logo-lg logo-dark">
                    </span>
                </a>
            </div>
            <!--end logo-->  
            <!-- Navbar -->
            <nav class="navbar-custom">    
                <ul class="list-unstyled topbar-nav float-end mb-0"> 
                    <li class="dropdown hide-phone">
                        <a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                            <i class="ti ti-search"></i>
                        </a>                
                        <div class="dropdown-menu dropdown-menu-end dropdown-lg p-0">
                            <!-- Top Search Bar -->
                            <div class="app-search-topbar">
                                <form action="#" method="get">
                                    <input type="search" name="search" class="from-control top-search mb-0" placeholder="Type text...">
                                    <button type="submit"><i class="ti ti-search"></i></button>
                                </form>
                            </div>
                        </div>
                    </li>                      

                    <li class="notification-list">
                        <a class="nav-link arrow-none nav-icon offcanvas-btn" href="#" data-bs-toggle="offcanvas" data-bs-target="#Appearance" role="button" aria-controls="Rightbar">
                            <i class="ti ti-settings ti-spin"></i>
                        </a>
                    </li>                       
            
                    <li class="dropdown notification-list">
                        <a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                            <i class="ti ti-mail"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end dropdown-lg pt-0">
                
                            <h6 class="dropdown-item-text font-15 m-0 py-3 border-bottom d-flex justify-content-between align-items-center">
                                Emails <span class="badge bg-soft-primary badge-pill">3</span>
                            </h6> 
                            <div class="notification-menu" data-simplebar="">
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">2 min ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <img src="static/picture/user-1.jpg" alt="" class="thumb-sm rounded-circle">
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>
                                            <small class="text-muted mb-0">Dummy text of the printing and industry.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">10 min ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <img src="static/picture/user-4.jpg" alt="" class="thumb-sm rounded-circle">
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Meeting with designers</h6>
                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">40 min ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <img src="static/picture/user-2.jpg" alt="" class="thumb-sm rounded-circle">
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">UX 3 Task complete.</h6>
                                            <small class="text-muted mb-0">Dummy text of the printing.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">1 hr ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <img src="static/picture/user-5.jpg" alt="" class="thumb-sm rounded-circle">
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>
                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">2 hrs ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <img src="static/picture/user-3.jpg" alt="" class="thumb-sm rounded-circle">
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Payment Successfull</h6>
                                            <small class="text-muted mb-0">Dummy text of the printing.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                            </div>
                            <!-- All-->
                            <a href="javascript:void(0);" class="dropdown-item text-center text-primary">
                                View all <i class="fi-arrow-right"></i>
                            </a>
                        </div>
                    </li>

                    <li class="dropdown notification-list">
                        <a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                            <i class="ti ti-bell"></i>
                            <span class="alert-badge"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end dropdown-lg pt-0">
                
                            <h6 class="dropdown-item-text font-15 m-0 py-3 border-bottom d-flex justify-content-between align-items-center">
                                Notifications <span class="badge bg-soft-primary badge-pill">2</span>
                            </h6> 
                            <div class="notification-menu" data-simplebar="">
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">2 min ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <i class="ti ti-chart-arcs"></i>
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>
                                            <small class="text-muted mb-0">Dummy text of the printing and industry.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">10 min ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <i class="ti ti-device-computer-camera"></i>
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Meeting with designers</h6>
                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">40 min ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">                                                    
                                            <i class="ti ti-diamond"></i>
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">UX 3 Task complete.</h6>
                                            <small class="text-muted mb-0">Dummy text of the printing.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">1 hr ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <i class="ti ti-drone"></i>
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>
                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                                <!-- item-->
                                <a href="#" class="dropdown-item py-3">
                                    <small class="float-end text-muted ps-2">2 hrs ago</small>
                                    <div class="media">
                                        <div class="avatar-md bg-soft-primary">
                                            <i class="ti ti-users"></i>
                                        </div>
                                        <div class="media-body align-self-center ms-2 text-truncate">
                                            <h6 class="my-0 fw-normal text-dark">Payment Successfull</h6>
                                            <small class="text-muted mb-0">Dummy text of the printing.</small>
                                        </div><!--end media-body-->
                                    </div><!--end media-->
                                </a><!--end-item-->
                            </div>
                            <!-- All-->
                            <a href="javascript:void(0);" class="dropdown-item text-center text-primary">
                                View all <i class="fi-arrow-right"></i>
                            </a>
                        </div>
                    </li>

                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle nav-user" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                            <div class="d-flex align-items-center">
                                <img src="static/picture/user-4.jpg" alt="profile-user" class="rounded-circle me-0 me-md-2 thumb-sm">
                                <div class="user-name">
                                    <small class="d-none d-lg-block font-11">Admin</small>
                                    <span class="d-none d-lg-block fw-semibold font-12">Maria Gibson <i class="mdi mdi-chevron-down"></i></span>
                                </div>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item" href="#"><i class="ti ti-user font-16 me-1 align-text-bottom"></i> Profile</a>
                            <a class="dropdown-item" href="#"><i class="ti ti-settings font-16 me-1 align-text-bottom"></i> Settings</a>
                            <div class="dropdown-divider mb-0"></div>
                            <a class="dropdown-item" href="#"><i class="ti ti-power font-16 me-1 align-text-bottom"></i> Logout</a>
                        </div>
                    </li><!--end topbar-profile-->
                    <li class="menu-item">
                        <!-- Mobile menu toggle-->
                        <a class="navbar-toggle nav-link" id="mobileToggle" onclick="toggleMenu()" onclick="toggleMenu()">
                            <div class="lines">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a><!-- End mobile menu toggle-->
                    </li> <!--end menu item--> 
                </ul><!--end topbar-nav-->

                <div class="navbar-custom-menu">
                    <div id="navigation">
                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">
                            <li class="nav-item dropdown parent-menu-item">
                                <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDashboards" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                    <span><i class="ti ti-smart-home menu-icon"></i>Dashboards</span>
                                </a>
                                <ul class="dropdown-menu animate slideIn" aria-labelledby="navbarDashboards"> 
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="analyticsDashboards" aria-labelledby="navbarDashboards">
                                            Analytics
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a href="index2.html" class="dropdown-item " aria-labelledby="analyticsDashboards">Dashboard</a>
                                            </li>
                                            <li>
                                                <a href="analytics-customers.html" class="dropdown-item " aria-labelledby="analyticsDashboards">Customers</a>
                                            </li>
                                            <li>
                                                <a href="analytics-reports.html" class="dropdown-item " aria-labelledby="analyticsDashboards">Reports</a>
                                            </li>
                                        </ul>
                                    </li> 
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="cryptoDashboards" aria-labelledby="navbarDashboards">
                                            Crypto
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="crypto-index.html" aria-labelledby="cryptoDashboards">Dashboard</a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="crypto-exchange.html" aria-labelledby="cryptoDashboards">Exchange</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="crypto-wallet.html" aria-labelledby="cryptoDashboards">Wallet</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="crypto-news.html" aria-labelledby="cryptoDashboards">Crypto News</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="crypto-ico.html" aria-labelledby="cryptoDashboards">ICO List</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="crypto-settings.html" aria-labelledby="cryptoDashboards">Settings</a>
                                            </li><!--end /li-->
                                        </ul>
                                    </li> 
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="projectsDashboards" aria-labelledby="navbarDashboards">
                                            Projects
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a href="horizontal-index.html" class="dropdown-item " aria-labelledby="projectsDashboards">Dashboard</a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="projects-clients.html" aria-labelledby="projectsDashboards">Clients</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="projects-team.html" aria-labelledby="projectsDashboards">Team</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="projects-project.html" aria-labelledby="projectsDashboards">Project</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="projects-task.html" aria-labelledby="projectsDashboards">Task</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="projects-kanban-board.html" aria-labelledby="projectsDashboards">Kanban Board</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="projects-chat.html" aria-labelledby="projectsDashboards">Chat</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="projects-users.html" aria-labelledby="projectsDashboards">Users</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="projects-create.html" aria-labelledby="projectsDashboards">Project Create</a>
                                            </li><!--end /li--> 
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="ecommerceDashboards" aria-labelledby="navbarDashboards">
                                            Ecommerce
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a href="ecommerce-index.html" class="dropdown-item " aria-labelledby="ecommerceDashboards">Dashboard</a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="ecommerce-products.html" aria-labelledby="ecommerceDashboards">Products</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ecommerce-product-list.html" aria-labelledby="ecommerceDashboards">Product List</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ecommerce-product-detail.html" aria-labelledby="ecommerceDashboards">Product Detail</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ecommerce-cart.html" aria-labelledby="ecommerceDashboards">Cart</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ecommerce-checkout.html" aria-labelledby="ecommerceDashboards">Checkout</a>
                                            </li><!--end /li-->
                                        </ul>
                                    </li>
                                </ul>
                            </li><!--end nav-item-->

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarApps" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span><i class="ti ti-apps menu-icon"></i>Apps</span>
                                </a>
                                <ul class="dropdown-menu animate slideIn" aria-labelledby="navbarApps"> 
                            
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="EmailsApps" aria-labelledby="navbarApps">
                                            Emails
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a href="apps-email-inbox.html" class="dropdown-item" aria-labelledby="EmailsApps">Inbox</a>
                                            </li>
                                            <li>
                                                <a href="apps-email-read.html" class="dropdown-item" aria-labelledby="EmailsApps">Read Email</a>
                                            </li>
                                        </ul>
                                    </li>                       
                                    <li>
                                        <a href="apps-chat.html" class="dropdown-item" aria-labelledby="navbarApps">
                                            Chat
                                        </a>
                                    </li>
                                    <li>
                                        <a href="apps-contact-list.html" class="dropdown-item" aria-labelledby="navbarApps">
                                            Contact List
                                        </a>
                                    </li>
                                    <li>
                                        <a href="apps-calendar.html" class="dropdown-item" aria-labelledby="navbarApps">
                                            Calendar
                                        </a>
                                    </li>
                                    <li>
                                        <a href="apps-invoice.html" class="dropdown-item" aria-labelledby="navbarApps">
                                            Invoice
                                        </a>
                                    </li>                    
                                </ul><!--end submenu-->
                            </li><!--end nav-item--> 
                    
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarUI_Kit" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span><i class="ti ti-planet menu-icon"></i>UI Kit</span>
                                </a>
                                <ul class="dropdown-menu animate slideIn" aria-labelledby="navbarUI_Kit">                                    
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="UiKit" aria-labelledby="navbarUI_Kit"></a>
                                            UI Elements
                                        
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="ui-alerts.html" aria-labelledby="UiKit">Alerts</a>
                                            </li><!--end /li--> 
                                            <li>
                                                <a class="dropdown-item" href="ui-avatar.html" aria-labelledby="UiKit">Avatar</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-buttons.html" aria-labelledby="UiKit">Buttons</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-badges.html" aria-labelledby="UiKit">Badges</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-cards.html" aria-labelledby="UiKit">Cards</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-carousels.html" aria-labelledby="UiKit">Carousels</a>
                                            </li><!--end /li-->                                
                                            <li>
                                                <a class="dropdown-item" href="ui-dropdowns.html" aria-labelledby="UiKit">Dropdowns</a>
                                            </li><!--end /li-->                                   
                                            <li>
                                                <a class="dropdown-item" href="ui-grids.html" aria-labelledby="UiKit">Grids</a>
                                            </li><!--end /li-->                                
                                            <li>
                                                <a class="dropdown-item" href="ui-images.html" aria-labelledby="UiKit">Images</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-list.html" aria-labelledby="UiKit">List</a>
                                            </li><!--end /li-->                                   
                                            <li>
                                                <a class="dropdown-item" href="ui-modals.html" aria-labelledby="UiKit">Modals</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-navs.html" aria-labelledby="UiKit">Navs</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-navbar.html" aria-labelledby="UiKit">Navbar</a>
                                            </li><!--end /li--> 
                                            <li>
                                                <a class="dropdown-item" href="ui-paginations.html" aria-labelledby="UiKit">Paginations</a>
                                            </li><!--end /li-->   
                                            <li>
                                                <a class="dropdown-item" href="ui-popover-tooltips.html" aria-labelledby="UiKit">Popover & Tooltips</a>
                                            </li><!--end /li-->                                
                                            <li>
                                                <a class="dropdown-item" href="ui-progress.html" aria-labelledby="UiKit">Progress</a>
                                            </li><!--end /li-->                                
                                            <li>
                                                <a class="dropdown-item" href="ui-spinners.html" aria-labelledby="UiKit">Spinners</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-tabs-accordions.html" aria-labelledby="UiKit">Tabs & Accordions</a>
                                            </li><!--end /li-->                               
                                            <li>
                                                <a class="dropdown-item" href="ui-typography.html" aria-labelledby="UiKit">Typography</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="ui-videos.html" aria-labelledby="UiKit">Videos</a>
                                            </li><!--end /li-->                                                     
                                        </ul>                                      
                                    </li><!--end nav-item-->
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="AdvancedUi" aria-labelledby="navbarUI_Kit">
                                            Advanced UI
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="advanced-animation.html" aria-labelledby="AdvancedUi">Animation</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="advanced-clipboard.html" aria-labelledby="AdvancedUi">Clip Board</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="advanced-dragula.html" aria-labelledby="AdvancedUi">Dragula</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="advanced-files.html" aria-labelledby="AdvancedUi">File Manager</a>
                                            </li><!--end /li--> 
                                            <li>
                                                <a class="dropdown-item" href="advanced-highlight.html" aria-labelledby="AdvancedUi">Highlight</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="advanced-rangeslider.html" aria-labelledby="AdvancedUi">Range Slider</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="advanced-ratings.html" aria-labelledby="AdvancedUi">Ratings</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="advanced-ribbons.html" aria-labelledby="AdvancedUi">Ribbons</a>
                                            </li><!--end /li-->                                  
                                            <li>
                                                <a class="dropdown-item" href="advanced-sweetalerts.html" aria-labelledby="AdvancedUi">Sweet Alerts</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="advanced-toasts.html" aria-labelledby="AdvancedUi">Toasts</a>
                                            </li><!--end /li-->
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="UiForms" aria-labelledby="navbarUI_Kit">
                                            Forms
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="forms-elements.html" aria-labelledby="UiForms">Basic Elements</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="forms-advanced.html" aria-labelledby="UiForms">Advance Elements</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="forms-validation.html" aria-labelledby="UiForms">Validation</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="forms-wizard.html" aria-labelledby="UiForms">Wizard</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="forms-editors.html" aria-labelledby="UiForms">Editors</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="forms-uploads.html" aria-labelledby="UiForms">File Upload</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="forms-img-crop.html" aria-labelledby="UiForms">Image Crop</a>
                                            </li><!--end /li--> 
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="UiCharts" aria-labelledby="navbarUI_Kit">
                                            Charts
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="charts-apex.html" aria-labelledby="UiCharts">Apex</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="charts-justgage.html" aria-labelledby="UiCharts">JustGage</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="charts-chartjs.html" aria-labelledby="UiCharts">Chartjs</a>
                                            </li><!--end /li--> 
                                            <li>
                                                <a class="dropdown-item" href="charts-toast-ui.html" aria-labelledby="UiCharts">Toast</a>
                                            </li><!--end /li-->
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="UiTables" aria-labelledby="navbarUI_Kit">
                                            Tables
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="tables-basic.html" aria-labelledby="UiTables">Basic</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="tables-datatable.html" aria-labelledby="UiTables">Datatables</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="tables-editable.html" aria-labelledby="UiTables">Editable</a>
                                            </li><!--end /li-->
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="UiIcons" aria-labelledby="navbarUI_Kit">
                                            Icons
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="icons-materialdesign.html" aria-labelledby="UiIcons">Material Design</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="icons-fontawesome.html" aria-labelledby="UiIcons">Font awesome</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="icons-tabler.html" aria-labelledby="UiIcons">Tabler</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="icons-feather.html" aria-labelledby="UiIcons">Feather</a>
                                            </li><!--end /li-->
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="UiMaps" aria-labelledby="navbarUI_Kit">
                                            Maps
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="maps-google.html" aria-labelledby="UiMaps">Google Maps</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="maps-leaflet.html" aria-labelledby="UiMaps">Leaflet Maps</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="maps-vector.html" aria-labelledby="UiMaps">Vector Maps</a>
                                            </li><!--end /li-->  
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu dropend">
                                        <a class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" href="#" id="Ui_Email" aria-labelledby="navbarUI_Kit">
                                            Email Templates
                                        </a>
                                        <ul class="dropdown-menu animate slideIn">
                                            <li>
                                                <a class="dropdown-item" href="email-templates-alert.html" aria-labelledby="Ui_Email">Alert Email</a>
                                            </li><!--end /li-->
                                            <li>
                                                <a class="dropdown-item" href="email-templates-basic.html" aria-labelledby="Ui_Email">Basic Action Email</a>
                                            </li><!--end /li-->                                    
                                            <li>
                                                <a class="dropdown-item" href="email-templates-billing.html" aria-labelledby="Ui_Email">Billing Email</a>
                                            </li><!--end /li-->
                                        </ul>
                                    </li><!--end nav-item-->                     
                                </ul><!--end submenu-->
                            </li><!--end nav-item-->

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarPages" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span><i class="ti ti-file-diff menu-icon"></i>Pages</span>
                                </a>
                                <ul class="dropdown-menu  animate slideIn" aria-labelledby="navbarPages">
                                    <li>
                                        <a class="dropdown-item" href="pages-profile.html" aria-labelledby="navbarPages">Profile</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="pages-tour.html" aria-labelledby="navbarPages">Tour</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="pages-timeline.html" aria-labelledby="navbarPages">Timeline</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="javascript:;" aria-labelledby="navbarPages">Treeview</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="horizontal-starter.html" aria-labelledby="navbarPages">Starter Page</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="pages-pricing.html" aria-labelledby="navbarPages">Pricing</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="pages-blogs.html" aria-labelledby="navbarPages">Blogs</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="pages-faq.html" aria-labelledby="navbarPages">FAQs</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="pages-gallery.html" aria-labelledby="navbarPages">Gallery</a>
                                    </li><!--end /li-->                                            
                                </ul>
                            </li><!--end nav-item-->

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbar_auth" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span><i class="ti ti-shield-lock menu-icon"></i>Authentication</span>
                                </a>
                                <ul class="dropdown-menu  animate slideIn" aria-labelledby="navbar_auth">
                                    <li>
                                        <a class="dropdown-item" href="auth-login.html">Log in</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="auth-register.html">Register</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="auth-recover-pw.html">Re-Password</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="auth-lock-screen.html">Lock Screen</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="auth-404.html">Error 404</a>
                                    </li><!--end /li-->
                                    <li>
                                        <a class="dropdown-item" href="auth-500.html">Error 500</a>
                                    </li><!--end /li-->
                                </ul><!--end submenu-->
                            </li><!--end nav-item-->                    
                        </ul><!-- End navigation menu -->
                    </div> <!-- end navigation -->
                </div>
                <!-- Navbar -->
            </nav>
            <!-- end navbar-->
        </div>
        <!-- Top Bar End -->



        <!-- end leftbar-tab-menu-->        

        <div class="page-wrapper">
            <!-- Page Content-->
            <div class="page-content-tab">
                <div class="container-fluid">
                    <!-- Page-Title -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-title-box">
                                <div class="row">
                                    <div class="col align-self-center">
                                        <h4 class="page-title pb-md-0">Project</h4>
                                        
                                    </div><!--end col-->
                                    <div class="col-auto align-self-center">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="javascript:void(0);">Unikit</a></li>
                                            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                            <li class="breadcrumb-item active">Project</li>
                                        </ol>
                                    </div><!--end col-->  
                                </div><!--end row-->                                                              
                            </div><!--end page-title-box-->
                        </div><!--end col-->
                    </div><!--end row-->
                    <!-- end page title end breadcrumb -->
                    <div class="row">
                        <div class="col-md-6 col-lg-3 order-lg-1 order-md-1">
                            <div class="card report-card">
                                <div class="card-body">
                                    <div class="row d-flex justify-content-center">
                                        <div class="col">
                                            <p class="text-dark mb-1 fw-semibold">Projects</p>
                                            <h4 class="font-22 fw-bold">77</h4>
                                            <p class="mb-0 text-truncate text-muted"><span class="text-success"><i class="mdi mdi-checkbox-marked-circle-outline me-1"></i></span>26 Project Complete</p>
                                        </div>
                                        <div class="col-auto align-self-center">
                                            <div class="bg-light-alt d-flex justify-content-center align-items-center thumb-md  rounded-circle">
                                                <i data-feather="layers" class="align-self-center text-muted icon-sm"></i>  
                                            </div>
                                        </div>
                                    </div>
                                </div><!--end card-body--> 
                            </div><!--end card--> 
                            <div class="card report-card">
                                <div class="card-body">
                                    <div class="row d-flex justify-content-center">                                                
                                        <div class="col">
                                            <p class="text-dark mb-1 fw-semibold">Tasks</p>
                                            <h4 class="font-22 fw-bold">41</h4>
                                            <p class="mb-0 text-truncate text-muted"><span class="badge badge-soft-success">Active</span> Week Avg.Sessions</p>
                                        </div>
                                        <div class="col-auto align-self-center">
                                            <div class="bg-light-alt d-flex justify-content-center align-items-center thumb-md  rounded-circle">
                                                <i data-feather="check-square" class="align-self-center text-muted icon-sm"></i>  
                                            </div>
                                        </div> 
                                    </div>
                                </div><!--end card-body--> 
                            </div><!--end card--> 
                            <div class="card report-card">
                                <div class="card-body">
                                    <div class="row d-flex justify-content-center">                                                
                                        <div class="col">
                                            <p class="text-dark mb-1 fw-semibold">Budget</p>
                                            <h4 class="font-22 fw-bold">$24100</h4>   
                                            <p class="mb-0 text-truncate text-muted"><span class="text-dark">$14k</span> Total used budgets</p>
                                        </div>
                                        <div class="col-auto align-self-center">
                                            <div class="bg-light-alt d-flex justify-content-center align-items-center thumb-md  rounded-circle">
                                                <i data-feather="dollar-sign" class="align-self-center text-muted icon-sm"></i>  
                                            </div>
                                        </div> 
                                    </div>
                                </div><!--end card-body--> 
                            </div><!--end card-->
                        </div> <!--end col--> 
                        <div class="col-lg-6 order-lg-2 order-md-3">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row align-items-center">
                                        <div class="col">                      
                                            <h4 class="card-title">Overview</h4>                      
                                        </div><!--end col-->
                                        <div class="col-auto"> 
                                            <div class="dropdown">
                                                <a href="#" class="btn btn-sm btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="mdi mdi-dots-horizontal text-muted"></i> 
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#">Purchases</a>
                                                    <a class="dropdown-item" href="#">Emails</a>
                                                </div>
                                            </div>       
                                        </div><!--end col-->
                                    </div>  <!--end row-->                                  
                                </div><!--end card-header-->
                                <div class="card-body">
                                    <div class="text-center">
                                        <div class="chart-container">
                                            <canvas id="bar" height="290"></canvas> 
                                        </div>
                                    </div>                                     
                                </div><!--end card-body--> 
                            </div><!--end card--> 
                        </div> <!--end col--> 
                        <div class="col-lg-3 col-md-6 order-lg-3 order-md-2">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row align-items-center">
                                        <div class="col">                      
                                            <h4 class="card-title">Tasks Performance</h4>                      
                                        </div><!--end col-->
                                        <div class="col-auto"> 
                                            <div class="dropdown">
                                                <a href="#" class="btn btn-sm btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="mdi mdi-dots-horizontal text-muted"></i> 
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#">Purchases</a>
                                                    <a class="dropdown-item" href="#">Emails</a>
                                                </div>
                                            </div>       
                                        </div><!--end col-->
                                    </div>  <!--end row-->                                  
                                </div><!--end card-header-->
                                <div class="card-body">
                                    <div class="text-center">
                                        <div id="task_status" class="apex-charts"></div>
                                        <h6 class="text-primary bg-soft-primary p-3 mb-0">
                                            <i data-feather="calendar" class="align-self-center icon-xs me-1"></i>
                                            01 January 2021 to 31 June 2021
                                        </h6>
                                    </div>                                     
                                </div><!--end card-body--> 
                            </div><!--end card-->                             
                        </div> <!--end col-->                  
                    </div><!--end row-->

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="project-task-content">
                                <div class="project-task-content-col">
                                    <div class="project-task-content-inner">                                        
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="text-uppercase font-15 font-weight-semibold mb-1">Backlog</h5>
                                                <h6 class="m-0">3 Issues - <span class="text-muted">20 Points</span></h6>
                                            </div><!--End Col-->
                                            <div class="col-auto">
                                                <div class="project-task-add-btn mt-2 me-2">
                                                    <button type="button" class="btn btn-soft-primary btn-icon-square-sm">
                                                        <i class="ti ti-plus"></i>
                                                    </button>
                                                </div>
                                            </div><!--End Col-->
                                        </div><!--End Row-->
                                        <div class="progress mt-2 me-1 border-radius-tl-bl bg-pink" style="height: 2px;">
                                            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="project-task-box" data-simplebar="">
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card--> 
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card-->                     
                                        </div><!--End project-task-box-->                                                
                                    </div><!--End project-task-content-inner-->
                                </div><!--End project-task-content-Col-->
                                <div class="project-task-content-col">
                                    <div class="project-task-content-inner">                                        
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="text-uppercase font-15 font-weight-semibold mb-1">Todo</h5>
                                                <h6 class="m-0">3 Issues - <span class="text-muted">20 Points</span></h6>
                                            </div><!--End Col-->
                                            <div class="col-auto">
                                                <div class="project-task-add-btn mt-2 me-2">
                                                    <button type="button" class="btn btn-soft-primary btn-icon-square-sm">
                                                        <i class="ti ti-plus"></i>
                                                    </button>
                                                </div>
                                            </div><!--End Col-->
                                        </div><!--End Row-->
                                        <div class="progress me-1 mt-2 bg-warning" style="height: 2px;">
                                            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="project-task-box" data-simplebar="">
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card--> 
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card--> 
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card-->                           
                                        </div><!--End project-task-box-->                                                
                                    </div><!--End project-task-content-inner-->
                                </div><!--End project-task-content-Col-->
                                <div class="project-task-content-col">
                                    <div class="project-task-content-inner">
                                        
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="text-uppercase font-15 font-weight-semibold mb-1">In Progress</h5>
                                                <h6 class="m-0">3 Issues - <span class="text-muted">20 Points</span></h6>
                                            </div><!--End Col-->
                                            <div class="col-auto">
                                                <div class="project-task-add-btn mt-2 me-2">
                                                    <button type="button" class="btn btn-soft-primary btn-icon-square-sm">
                                                        <i class="ti ti-plus"></i>
                                                    </button>
                                                </div>
                                            </div><!--End Col-->
                                        </div><!--End Row-->
                                        <div class="progress me-1 mt-2 bg-success" style="height: 2px;">
                                            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="project-task-box" data-simplebar="">
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card-->                           
                                        </div><!--End project-task-box-->                                                
                                    </div><!--End project-task-content-inner-->
                                </div><!--End project-task-content-Col-->
                                <div class="project-task-content-col">
                                    <div class="project-task-content-inner">
                                        
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="text-uppercase font-15 font-weight-semibold mb-1">Testing</h5>
                                                <h6 class="m-0">3 Issues - <span class="text-muted">20 Points</span></h6>
                                            </div><!--End Col-->
                                            <div class="col-auto">
                                                <div class="project-task-add-btn mt-2 me-2">
                                                    <button type="button" class="btn btn-soft-primary btn-icon-square-sm">
                                                        <i class="ti ti-plus"></i>
                                                    </button>
                                                </div>
                                            </div><!--End Col-->
                                        </div><!--End Row-->
                                        <div class="progress me-1 mt-2 bg-primary" style="height: 2px;">
                                            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="project-task-box" data-simplebar="">
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card--> 
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card-->                           
                                        </div><!--End project-task-box-->                                                
                                    </div><!--End project-task-content-inner-->
                                </div><!--End project-task-content-Col-->
                                <div class="project-task-content-col">
                                    <div class="project-task-content-inner">
                                        
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="text-uppercase font-15 font-weight-semibold mb-1">Done</h5>
                                                <h6 class="m-0">3 Issues - <span class="text-muted">20 Points</span></h6>
                                            </div><!--End Col-->
                                            <div class="col-auto">
                                                <div class="project-task-add-btn mt-2 me-2">
                                                    <button type="button" class="btn btn-soft-primary btn-icon-square-sm">
                                                        <i class="ti ti-plus"></i>
                                                    </button>
                                                </div>
                                            </div><!--End Col-->
                                        </div><!--End Row-->
                                        <div class="progress me-1 mt-2  border-radius-tr-br bg-danger" style="height: 2px;">
                                            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="project-task-box" data-simplebar="">
                                            <div class="project-task-card mb-3">
                                                <div class="card-body">
                                                    <div class="dropdown d-inline-block float-end">
                                                        <a class="dropdown-toggle mr-n2 mt-n2" id="drop2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                                            <i class="las la-ellipsis-v font-14 text-muted"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop2">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div><!--end dropdown-->
                                                    <i class="mdi mdi-circle-outline mt-n2 font-14 text-warning"></i>
                                                    <span class="badge badge-soft-primary mb-2">Mobile App</span>
                                                    <h5 class="my-1 font-15">Mobile Account Setting</h5>                                                    
                                                    <p class="mb-2 text-muted fw-semibold font-13 text-break">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
                                                    <hr class="hr-dashed">
                                                    <div class="row justify-content-center">
                                                        <div class="col-6 align-self-center">
                                                            <ul class="list-inline mb-0">                                                                    
                                                                <li class="list-item d-inline-block mr-2">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-format-list-bulleted text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">0/5</span>
                                                                    </a>
                                                                </li>
                                                                <li class="list-item d-inline-block">
                                                                    <a class="" href="#">
                                                                        <i class="mdi mdi-comment-outline text-muted"></i>
                                                                        <span class="text-muted font-weight-bold">3</span>
                                                                    </a>                                                                               
                                                                </li>
                                                            </ul>
                                                        </div><!--end col-->
                                                        <div class="col-6 align-self-center">
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-1.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                            <a class="float-end" href="#">
                                                                <img src="static/picture/user-9.jpg" alt="user" class="thumb-xs rounded-circle">
                                                            </a>
                                                        </div><!--end col-->
                                                    </div><!--end row-->
                                                </div><!--end card-body-->
                                            </div><!--End project-task-card-->                           
                                        </div><!--End project-task-box-->                                                
                                    </div><!--End project-task-content-inner-->
                                </div><!--End project-task-content-Col-->
                            </div><!--End project-task-content-->
                        </div><!--End Col-->
                    </div><!--end row-->
                    
                </div><!-- container -->
            </div>
            <!-- end page content -->
        </div>

         <!--Start Rightbar-->
         <!--Start Rightbar/offcanvas-->
         <div class="offcanvas offcanvas-end" tabindex="-1" id="Appearance" aria-labelledby="AppearanceLabel">
             <div class="offcanvas-header border-bottom">
               <h5 class="m-0 font-14" id="AppearanceLabel">Appearance</h5>
               <button type="button" class="btn-close text-reset p-0 m-0 align-self-center" data-bs-dismiss="offcanvas" aria-label="Close"></button>
             </div>
             <div class="offcanvas-body">  
                 <h6>Account Settings</h6>
                 <div class="p-2 text-start mt-3">
                     <div class="form-check form-switch mb-2">
                         <input class="form-check-input" type="checkbox" id="settings-switch1">
                         <label class="form-check-label" for="settings-switch1">Auto updates</label>
                     </div><!--end form-switch-->
                     <div class="form-check form-switch mb-2">
                         <input class="form-check-input" type="checkbox" id="settings-switch2" checked="">
                         <label class="form-check-label" for="settings-switch2">Location Permission</label>
                     </div><!--end form-switch-->
                     <div class="form-check form-switch">
                         <input class="form-check-input" type="checkbox" id="settings-switch3">
                         <label class="form-check-label" for="settings-switch3">Show offline Contacts</label>
                     </div><!--end form-switch-->
                 </div><!--end /div-->
                 <h6>General Settings</h6>
                 <div class="p-2 text-start mt-3">
                     <div class="form-check form-switch mb-2">
                         <input class="form-check-input" type="checkbox" id="settings-switch4">
                         <label class="form-check-label" for="settings-switch4">Show me Online</label>
                     </div><!--end form-switch-->
                     <div class="form-check form-switch mb-2">
                         <input class="form-check-input" type="checkbox" id="settings-switch5" checked="">
                         <label class="form-check-label" for="settings-switch5">Status visible to all</label>
                     </div><!--end form-switch-->
                     <div class="form-check form-switch">
                         <input class="form-check-input" type="checkbox" id="settings-switch6">
                         <label class="form-check-label" for="settings-switch6">Notifications Popup</label>
                     </div><!--end form-switch-->
                 </div><!--end /div-->               
             </div><!--end offcanvas-body-->
         </div>
         <!--end Rightbar/offcanvas-->
         <!--end Rightbar-->
         
        <!--Start Footer-->
        <!-- Footer Start -->
        <footer class="footer text-center text-sm-start">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></footer>
        <!-- end Footer -->                
        <!--end footer-->

        <!-- Javascript  -->   
        <script src="static/js/chart.js"></script>
        <script src="static/js/litepicker.js"></script>
        <script src="static/js/apexcharts.min.js"></script>       
        <script src="static/js/projects-index.init.js"></script>
        <!-- App js -->
        <script src="static/js/app.js"></script>
    </body>

</html>